<!--
 * @Description: 首页组件
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-02-27 13:36:12
 -->
<template>
  <div
    class="home"
    id="home"
    name="home"
  >
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item
          v-for="item in carousel"
          :key="item.carousel_id"
        >
          <img
            style="height:460px;"
            :src="$target + item.imgPath"
            :alt="item.describes"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <div class="main-box ">
      <el-row>
        <el-col :span="18">
          <div class="main">
            <el-row>
              <div class="phone">
                <div class="box-hd">
                  <div class="title">编辑推荐</div>
                  <div
                    class="more"
                    id="more"
                  >
                    <!-- <MyMenu :val="2" @fromChild="getChildMsg"> -->
                    <!-- <span class="pointer">更多</span> -->
                    <!-- </MyMenu> -->
                  </div>
                </div>
                <div class="box-bd">
                  <!-- <div class="promo-list">
              <router-link to>
                <img :src="$target +'public/imgs/phone/phone.png'" />
              </router-link>
            </div> -->
                  <div class="list">
                    <MyList
                      :list="recommendList"
                      :isMore="true"
                    ></MyList>
                  </div>
                </div>
              </div>
            </el-row>
            <el-row>
              <div
                class="appliance"
                id="promo-menu"
              >
                <div class="box-hd">
                  <div class="title">新软推荐</div>
                  <!-- <div
                    class="more"
                    id="more"
                  >
                    <span class="pointer">更多</span>
                  </div> -->
                </div>
                <div class="box-bd">
                  <div class="list">
                    <MyList
                      :list="newSoftList"
                      :isMore="true"
                    ></MyList>
                  </div>
                </div>
              </div>
            </el-row>

          </div>
        </el-col>
        <el-col
          :span="6"
          class="bg"
        >
          <div class="rank title">热门排行</div>
          <div
            class="rank-item "
            v-for=" (i,index) in hotrRankingList"
            :key="index"
          >
            <router-link :to="{ path: '/goods/details', query: {productID:i.id} }">
              <div class="flex rank-item" >
                <div
                  class="index"
                  style="font-size:18px;margin-right:5px"
                >{{index+1}}.</div>
                <div
                  class="name "
                  style=""
                >{{i.softwareName}}</div>
                <div class="times">{{i.downloadSize}}次下载</div>
              </div>

            </router-link>
          </div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>
<script>
import { api } from "../api";
export default {
  data() {
    return {
      carousel: "", // 轮播图数据
      phoneList: "", // 手机商品列表
      miTvList: "", // 小米电视商品列表
      applianceList: "", // 家电商品列表
      applianceHotList: "", //热门家电商品列表
      accessoryList: "", //配件商品列表
      accessoryHotList: "", //热门配件商品列表
      protectingShellList: "", // 保护套商品列表
      chargerList: "", //充电器商品列表
      applianceActive: 1, // 家电当前选中的商品分类
      accessoryActive: 1, // 配件当前选中的商品分类

      recommendList: [],
      newSoftList: [],
      hotrRankingList: [],
      rankList: [
        {
          name: "300 浏览器",
          time: 1999,
        },
        {
          name: "300 浏览器",
          time: 1999,
        },
        {
          name: "300 浏览器",
          time: 1999,
        },
        {
          name: "300 浏览器",
          time: 1999,
        },
        {
          name: "300 浏览器",
          time: 1999,
        },
      ],
    };
  },
  watch: {
    // 家电当前选中的商品分类，响应不同的商品数据
    applianceActive: function (val) {
      // 页面初始化的时候把applianceHotList(热门家电商品列表)直接赋值给applianceList(家电商品列表)
      // 所以在切换商品列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      if (this.applianceHotList == "") {
        this.applianceHotList = this.applianceList;
      }
      if (val == 1) {
        // 1为热门商品
        this.applianceList = this.applianceHotList;
        return;
      }
      if (val == 2) {
        // 2为电视商品
        this.applianceList = this.miTvList;
        return;
      }
    },
    accessoryActive: function (val) {
      // 页面初始化的时候把accessoryHotList(热门配件商品列表)直接赋值给accessoryList(配件商品列表)
      // 所以在切换商品列表时判断accessoryHotList是否为空,为空则是第一次切换,把accessoryList赋值给accessoryHotList
      if (this.accessoryHotList == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        // 1为热门商品
        this.accessoryList = this.accessoryHotList;
        return;
      }
      if (val == 2) {
        // 2为保护套商品
        this.accessoryList = this.protectingShellList;
        return;
      }
      if (val == 3) {
        //3 为充电器商品
        this.accessoryList = this.chargerList;
        return;
      }
    },
  },
  created() {
    // 获取轮播图数据
    this.$axios
      .post(api.newSoftList, {})
      .then((res) => {
        console.log(res);
        this.newSoftList = res.data.data;
      })
      .catch((err) => {
        return Promise.reject(err);
      });
    this.$axios
      .post(api.hotrRankingList, {})
      .then((res) => {
        console.log(res);
        this.hotrRankingList = res.data.data;
      })
      .catch((err) => {
        return Promise.reject(err);
      });

    this.$axios
      .post(api.recommendList, {})
      .then((res) => {
        console.log(res);
        this.recommendList = res.data.data;
      })
      .catch((err) => {
        return Promise.reject(err);
      });
    // 获取各类商品数据
  },
  methods: {
    // 获取家电模块子组件传过来的数据
    getChildMsg(val) {
      this.applianceActive = val;
    },
    // 获取配件模块子组件传过来的数据
    getChildMsg2(val) {
      this.accessoryActive = val;
    },
    // 获取各类商品数据方法封装
    getPromo(apiName, val) {
      this.$axios
        .post(api[apiName], {})
        .then((res) => {
          this[val] = res.data.Product;
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  },
};
</script>
<style scoped>
@import "../assets/css/index.css";
.flex {
  display: flex;
}
.rank {
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 200;
  color: #333;
}
.rank-item {
  display: flex;
  align-items: center;
  width: 260px;
  cursor: pointer;
  margin-bottom: 15px;
}
.name {
  flex: 1;
  font-size: 18px;
  color: #3d3d3d;
}
.times {
  color: #ccc;
}
.pointer {
  cursor: pointer;
}
</style>